<template>
  <div class="anylysis">
    <div id="event"></div>
  </div>
</template>
<script setup>
// import tools from '@/utils/tools.js'
import { ref, computed, reactive, getCurrentInstance, onMounted } from "vue";
import {
  getWeiboAnalysis,
  getWeiboCount,
  getWeiboSearch,
  getWeiboTask,
  getWeiboSpider,
  modifyWeiboSpider,
  sendWeiboSpider,
  delWeiboSpider,
  getWeiboPL,
  getWeiboIndex,
} from "@/api";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
import { fa } from "element-plus/es/locale";
const {
  appContext: {
    config: { globalProperties },
  },
} = getCurrentInstance();

let echarts = reactive(globalProperties.$echarts);
const router = useRouter();
const state = reactive({
  tableData: [],
  keyWord: "",
  formInline: {},
  markData: [],
  type: 1, //1-创建 2-修改
});
const request = require("request");

//   request({
//         url: 'https://data.weibo.com/index/ajax/newindex/getchartdata',
//         method: "POST",
//         json: true,
//         headers: {
//             "content-type": "application/json",
//             'Referer': 'https://data.weibo.com/index/newindex?visit_type=trend&wid=1091324264752',
//             'User-Agent': 'Mozilla/5.0 (Linux; Android 6.0; Nexus 5 Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Mobile Safari/537.36',
//             'origin': 'https://data.weibo.com/index',
//             'Access-Control-Allow-Origin': '*'
//         },
//         body: {wid: '1091324264752',dateGroup: '3month'}
//     }, function(error, response, body) {
//         if (!error && response.statusCode == 200) {
//             console.log(body) // 请求成功的处理逻辑
//         }
//     });

const dialogVisible = ref(false);

onMounted(() => {
  getData();
});
const getData = () => {
  getWeiboIndex({ wid: "1091324264752", dateGroup: "3month" }).then((res) => {
    console.log(res, "dateGroupdateGroup");
    if (res && res.data) {
      state.tableData = res.data.data.data;
      state.tableData[0].trend.x.forEach((item, index) => {
        if (item === "1月4日") {
          state.markData.push({
            value: "新型冠状病毒感染回归乙类管理",
            xAxis: index,
            yAxis: state.tableData[0].trend.s[index],

          });
        }
        if (item === "3月8日") {
          state.markData.push({
            value: "新冠不再为国际关注的突发公共卫生事件",
            xAxis: index,
            yAxis: state.tableData[0].trend.s[index],
          });
        }
        //
      });
      renderChart();
    }
  });
};
const renderChart = () => {
  var myChart = echarts.init(document.getElementById("event"), "white");
  let option = {
    title: {
      text: "微博新冠疫情热度趋势",
    },
    xAxis: {
      type: "category",
      data: state.tableData[0].trend.x,
    },
    yAxis: {
      type: "value",
    },
    series: [
      {
        data: state.tableData[0].trend.s,
        type: "line",
        smooth: true,
   
        markPoint: {
          data: state.markData,
          label: {
            offset: [0, -30],
            textStyle: {
              color: "#67C23A",
              fontSize: 15,
            },
          },
          itemStyle: {
            color: '#67C23A',
            //  borderColor: '#67C23A'
          }
            // symbolSize: 10
        },
      },
    ],
  };
  myChart.setOption(option);
};
</script>
<style lang='scss' scoped>
.anylysis {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  #event {
    width: 100%;
    height: 500px;
  }
}
</style>
